iT邦幫忙

2024 iThome 鐵人賽

DAY 21
1
JavaScript

可愛又迷人的 Web API系列 第 21

Day21. 如何使用 MutationObserver API 追蹤 DOM 的變化 I

  • 分享至 

  • xImage
  •  

在 Web API 中看到 Observer 單字的,多半都跟監聽、觀察有關,今天要介紹的 Mutation Observer API 就是其中一樣,他可以監聽 DOM 的變化。當我們需要即時更新,或動態監聽 DOM 時,使用 Mutation Observer API,就不要輪詢或反覆查詢 DOM,所以能提升響應的速度與效能。

常應用的情境包括但不限:

  • 使用者動態新增、刪除元素
  • 更新網站畫面
  • 表單內容改變時

如何使用 Mutation Observer 監聽 DOM 變動

監聽 DOM 的變動可以拆解成以下幾個步驟:

  1. 建立 MutationObserver 實例,當監聽的 DOM 變動時,會調用 callback 函式
  2. 指定想要監聽的 DOM 的變動類型,例如是屬性變更?還是子節點發生改變?
  3. 開始與停止監聽
    • 使用 observe 方法開始監聽
    • 使用 disconnect 停止監聽

程式碼範例如下:

// 指定想要監聽的 DOM 節點
const targetNode = document.getElementById('myElement');

// 定義觀察選項
const config = {
  attributes: true, // 監聽屬性變更
  childList: true,  // 監聽子節點變動
  characterData: true, // 監聽文本內容改變
  subtree: true    // 監聽所有子節點的變動
};

const callback = (mutationsList) => {
  mutationsList.forEach((mutation) => {
    console.log('Mutation type:', mutation.type);

    if (mutation.type === 'attributes') {
      console.log('Attribute changed:', mutation.attributeName);
    } else if (mutation.type === 'childList') {
      console.log('Child nodes changed:', mutation);
    } else if (mutation.type === 'characterData') {
      console.log('Text content changed:', mutation.target.data);
    }
  });
};

// 建立 MutationObserver 實例,並傳入 callback 函式
const observer = new MutationObserver(callback);

// 開始觀察
observer.observe(targetNode, config);

// 停止觀察
observer.disconnect();

監聽的種類

接著進一步分享我們可以監聽的種類

1. 屬性 (attributes)

如果一個元素的 classid 被修改,MutationObserver 就會捕捉到這個變動。在觀察選項中將 attributes 設置為 true,即可啟用這種類型的監聽。

範例

const config = { attributes: true };

如果只想監聽特定屬性的變動,可以通過 attributeFilter 選項指定:

const config = {
  attributes: true,
  attributeFilter: ['class', 'id'] // 只監聽 class 和 id 屬性
};

2. 子節點 (childList)

用於監聽新增或刪除元素子節點的變動。如果 DOM 中有元素被插入或移除,MutationObserver 就能捕捉到這個變動。將 childList 設置為 true,即可啟用這種類型的監聽。

範例

const config = { childList: true };

如果想監聽所有後代節點的變動,可以將 subtree 設為 true

const config = {
  childList: true,
  subtree: true // 監聽所有後代節點的變動
};

3. 文字內容 (characterData)

當我們修改元素中的文字時,就會觸發這個監聽,將 characterData 設置為 true 以使用。

範例

const config = { characterData: true };

同樣,如果需要監聽所有後代節點的文字內容變動,也可以設置 subtreetrue

const config = {
  characterData: true,
  subtree: true // 監聽所有後代節點的文字變動
};

小結

MutationObserver API 提供了一個高效的方法來監聽 DOM 的變化,尤其是在需要即時響應變更的動態應用中。我們可以不用依賴傳統的監聽方式,取而代之的,是使用更靈活的 MutationObserver API 來追蹤特定元素的變動。若有在考慮如何提升網頁效能,MutationObserver API 會是一個值得嘗試的工具。

以上有任何問題,歡迎留言討論。


上一篇
Day20. 用 Web Speech API 與你的 AI 朋友互動聊天
下一篇
Day22. 如何使用 MutationObserver API 追蹤 DOM 的變化 II
系列文
可愛又迷人的 Web API31
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言